<template>
    <!-- <h1>商品详情</h1> -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in proDetail.banners" ::key="item">
            <van-image :src="item" />
        </van-swipe-item>
    </van-swipe>
    <div>
        <p>商品分类：{{ proDetail.category }}</p>
        <p>商品品牌：{{ proDetail.brand }}</p>
        <p>商品名：{{ proDetail.proname }}</p>
        <p>商品价格：￥{{ proDetail.originprice }}</p>
        <p>{{ proDetail.desc }}</p>
    </div>
    <div class="icon_box">
        <van-icon name="shopping-cart-o" size="30px" />
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import type { Ref } from 'vue'
import { getProDetail } from "@/api/pro";
import { useRoute } from "vue-router";

//创建一个路由信息集合 (this.$route)
const route = useRoute()

interface IProDetail {
    banners: string[];
    proid: string;
    category: string;
    brand: string;
    proname: string;
    originprice: number;
    sales: number;
    stock: number;
    desc: string;
    issale: number;
    isrecommend: number;
    discount: number;
    isseckill: number;
    img1: string;
    img2: string;
    img3: string;
    img4: string;
}


//存储商品信息
const proDetail: Ref<IProDetail> = ref({})

onMounted(async () => {
    const { data } = await getProDetail(route.query.id)

    proDetail.value = data.data
    proDetail.value.banners = proDetail.value.banners[0].split(',')

    console.log(proDetail.value);

})
</script>

<style scoped lang="scss">
.icon_box {
    width: 40px;

    position: flex;
    bottom: 10px;
    right: 10px;
}
</style>